<style>
	.btn-min {
		min-width: 120px;
	}
	.share-bar {
		font-size: 0.8em;
	}
	.float-right {
		float: right;
	}
	.float-left{
	    float: left;
	}
	/* 商品详情，评价  */
	
	.product-detail header {
		display: -webkit-box;
		display: box;
		height: 2.857em;
		border: 1px solid #ccc;
		border-top: none;
		border-bottom: none;
		background-color: #e9e9e9;
		box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
		text-align: center;
		line-height: 2.857em;
	}
	.product-detail header a {
		display: block;
		border-top: 1px solid #ccc;
		-webkit-box-flex: 1;
	}
	.product-detail header a.current {
		background-color: #fff;
		border-top-color: #b10000;
		border-top-width: 2px;
	}
	.product-detail .wrap {
		overflow: hidden;
		border: 1px solid #ccc;
		border-top: none;
		background-color: #fff;
		word-wrap: break-word;
		padding-top: 1em;
	}
	#product-content {
		margin-bottom: 10px;
	}
	#product-content p {
		padding: 0 10px 10px;
	}
	.product-comment li {
		border-bottom: 1px solid #ccc;
		padding-bottom: .3em;
		margin-bottom: .7em;
		margin: 0 10px 10px;
		border: #ddd solid 1px;
		padding: 10px;
		border-radius: 3px;
	}
	.product-comment li .user {
		margin-top: .8em;
		font-size: .8em;
		padding-top: 5px;
		border-top: #ddd dashed 1px;
	}
	.product-comment li .user time {
		float: right;
		color: #555;
	}
	#product-comment-list {
		text-align: center;
		padding: 20px;
	}
	del,
	.carriage {
		color: #999;
		font-size: 70%;
	}
	.support-head li {
		width: 20%;
		text-align: center;
		overflow: hidden;
		float: left;
		box-sizing: border-box;
		margin: 5px auto;
	}
	.support-head span {
		width: 54px;
		height: 54px;
		display: inline-block;
		border: #eee solid 1px;
		border-radius: 100%;
		padding: 2px;
	}
	.support-head img{
	    border-radius: 100%;
	}
	.support-info{
	    text-align: center;
        padding: 5px;
        margin: 10px auto;
        font-size: 75%;
        border: #ddd dashed 1px;
	}
	.support-info span{
	    display: inline-block;
	    font-weight: bold;
	}
	.color-red{
	    color: red;
	}
	.text-underline{
	    text-decoration: underline;
	}
	.text-left{
	    text-align: left;
	}
	.margin-top{
	    margin-top: 10px;
	}
	.user-face{
	    width: 48px;
	    height: 48px;
	    border-radius: 100%;
	    margin-right: 10px;
	}
	.try-list{
	    padding: 3px;
	    margin: 10px;
	    border-bottom: #060 dashed 1px;
	}
</style>

<!-- TOPBAR -->
<header class="top-bar flex-row">
	<span class="row-item row-item-auto top-bar-back" onclick="window.history.back()">返回</span>
	<h3 class="row-item top-bar-name">{$shopGoods.name}</h3>
	<a class="row-item row-item-auto top-bar-menu" href="{$config.url}">主页</a>
</header>

<include file="headerBar" />

<!-- 商品图片 -->
<section class="pr-detail-header">

	<style type="text/css">
		.gh-tip {
			position: relative;
		}
	</style>

	<div class="swiper-container">
		<figure class="tc swiper-wrapper">
			<volist name="shopGoods['images']" id="vo">
				<div class="swiper-slide">
					<img src="{$vo}" alt="">
				</div>
			</volist>
		</figure>
	</div>

</section>

<section class="pr-detail pr-detail-info">

	<header class="flex-row">
		<div class="row-item row-item-6">
		    <notempty name="shopGoods.description"><h3>{$shopGoods.description}</h3></notempty>
			<p class="pr-info-now-price"><small>试用价:<gt name="shopGoods.try_price" value="0">￥{$shopGoods.try_price}<else /><span class="color-red">免费体验</span></gt></small></p>
			<p class="pr-info-now-price"><span class="float-right carriage">运费：￥{$shopGoods.carriage}</span> <del>市场价:￥{$shopGoods.high_price}</del>
			</p>
		</div>
	</header>

	<div class="pr-info-freight">
		<p>
			<span class="label label-info">
				{$shopGoods['saled_count']+$try['successCount']+2000}人已成功试用
				<if condition="$shopGoods['limit_count']*1 eq 0 || ($shopGoods['limit_count']*1 neq 0 && ($try['times'] lt $shopGoods['limit_count']*1))">
					，还差<span>{$supporters.diff}</span>个就可以<gt name="try.times" value="0">第<span>{$try['times']+1}</span>次</gt>领取试用产品了！
				</if>
			</span>
			<span class="float-right">
			    <eq name="try.myself" value="1">
			        <eq name="try.times" value="0">您尚未试用过<else />您已经试用过<b>{$try.times}</b>次</eq>
			    <else />
			        <a class="color-red text-underline" href="__CONTROLLER__/show/sid/{$sid}/qid/{$qid}/id/{$try.productId}">我也要参与</a>
			    </eq>
			</span>
		</p>
	</div>

</section>

<section class="pr-detail">

	<h5 class="pr-detail-title"><span class="float-right color-red text-underline"><small><a href="{$config.try_url}">如何参与？</a></small></span>攒支持赢免费试用</h5>

	<section id="pr-buy-check" class="pr-detail-content">
		<ul class="support-head clearfix">
		    <volist name="supporters.list" id="vo">
		        <empty name="vo">
                <li><span><img src="__STYLE__/DisShop/images/user-gray.png"></span></li>
		        <else />
                <li><span><img src="<empty name='vo.face'>__STYLE__/DisShop/images/user-red.png<else />{$vo.face}</empty>"></span></li>
		        </empty>
		    </volist>
		</ul>
		<eq name="try.myself" value="1">
    		<eq name="user.subscribe" value="1">
    		    <gt name="supporters.diff" value="0">
                <p class="support-info">您已经攒了<span>{$supporters.count}</span>个支持</p>
                <p><a id="btn-share" class="btn btn-block btn-action-orange" href="javascript:;" data-jump="0">马上分享攒支持</a></p>
                <else />
                <p class="support-info">您已经攒了<span>{$supporters.count}</span>个支持，可以领取试用产品了！</p>
                <p><a href="__CONTROLLER__/drawGoods/sid/{$sid}/qid/{$qid?$qid:0}/tryId/{$try.id}" class="btn btn-block btn-action-orange" data-jump="0">领取试用产品</a></p>
                </gt>
    		<else />
                <p class="support-info">您还没有关注公众号，关注后就可以参与活动了！</p>
                <p><a href="{$config.subscribe_url}" class="btn btn-block btn-action-orange" data-jump="0">关注公众号</a></p>
    		</eq>
        <else />
            <p class="support-info text-left clearfix">
            	<img class="user-face float-left" src="{$try.face}" />您的好友<span>{$try.nickname}</span> 正在参与<span>{$shopGoods.name}</span>活动，已经攒了
            	<span>{$supporters.count}</span>个支持
            	<if condition="$shopGoods['limit_count']*1 eq 0 || ($shopGoods['limit_count']*1 neq 0 && ($try['times'] lt $shopGoods['limit_count']*1))">
            	，<gt name="supporters.diff" value="0">还差<span>{$supporters.diff}</span>个就可以<gt name="try.times" value="0">第<span>{$try['times']+1}</span>次</gt>领取试用产品了，</gt>跪求您的支持！
            	</if>
            </p>
            <p class="support-info color-red">支持朋友后自己也可以获得10元红包哦~</p>
            <eq name="user.subscribe" value="0">
                <p class="support-info color-red">您还没关注公众账号~<a href="{$config.subscribe_url}" class="text-underline">关注</a></p>
            </eq>
            <p>
                <eq name="supporters.supported" value="1">
                <a id="btn-friend" class="btn btn-block btn-action-orange" href="javascript:;" data-jump="0">已经支持，邀请更多朋友支持ta</a>
                <else />
                <a id="btn-support" class="btn btn-block btn-action-orange" href="javascript:;" data-jump="0">支持好友</a>
                </eq>
                <a href="__CONTROLLER__/show/sid/{$sid}/qid/{$qid?$qid:0}/id/{$try.productId}" class="btn btn-block btn-action-red margin-top" data-jump="0">我也要参与</a>
            </p>
		</eq>
	</section>

</section>

<section class="product-item product-detail" style="margin-top:10px;">
	<header id="product-tab">
		<a href="javascript:;" class="current" data-id="product-content">商品详情</a>
		<a href="javascript:;" data-id="product-comment">参与用户</a>
	</header>
	<div class="wrap pd10" id="product-content" style="">
		{$shopGoods.content}
	</div>
	<div class="wrap pd10" id="product-comment" style="display:none;">
		<!-- 评论start -->
		<volist name="tryList" id="vo">
		    <div class="try-list clearfix"><img class="user-face" src="{$vo.face}" /> <span>{$vo.nickname}</span></div>
		</volist>
	</div>
</section>

<link rel="stylesheet" href="__COMMON__/swiper/idangerous.swiper.css">
<script src="__PUBLIC__/Static/js/simapp.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
	(function() {
	    var user = {:json_encode($user)};
	    var config = {:json_encode($config)};
	    
		var w = $(".swiper-container").width() / 3;
		$(".swiper-container,.swiper-wrapper,.swiper-slide").height(w * 1.5);
		require(['__COMMON__/swiper/idangerous.swiper.js'], function(S) {
			new S(".swiper-container", {
				mode: 'horizontal',
				autoplay: 5000
			});
		});


		// 获取商品评价内容
		var productId = "{$shopGoods.id}";

		/*$.ajax({
			type: 'POST',
			url: "{:U('Home/DisShopRate/moreRate')}",
			data: {
				'sid': "{$sid}",
				"product_id": "{$shopGoods.id}"
			},
			success: function(data) {
				data.extra && showComment(data.extra);
			}
		})

		function showComment(data) {
		    if(data && data.length>0){
    			var html = "";
    			for (var i = 0; item = data[i]; i++) {
    				html += "<li><p>" + item.content + "</p>" + "<div class='user clearfix'><span>" + item.userNickName + "</span><time>" + new Date(item.create_time * 1000).Format("yyyy-MM-dd hh:mm:ss") + "</time></div>" + "</li>";
    			};
    			document.getElementById("product-comment").innerHTML = "<ul class='product-comment'>" + html + "</ul>";
			}
		};*/

		Date.prototype.Format = function(fmt) {
			var o = {
				"M+": this.getMonth() + 1, //月份 
				"d+": this.getDate(), //日 
				"h+": this.getHours(), //小时 
				"m+": this.getMinutes(), //分 
				"s+": this.getSeconds(), //秒 
				"q+": Math.floor((this.getMonth() + 3) / 3), //季度 
				"S": this.getMilliseconds() //毫秒 
			};
			if (/(y+)/.test(fmt))
				fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
			for (var k in o)
				if (new RegExp("(" + k + ")").test(fmt))
					fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
			return fmt;
		};

		// 切换商品详情和评价
		var productTab = document.querySelectorAll('#product-tab a');
		[].forEach.call(productTab, function(obj) {
			obj.addEventListener('click', clickTab, false);
		});

		// 切换Tab
		function clickTab() {
			[].forEach.call(productTab, function(obj) {
				obj.className = '';
				document.getElementById(obj.getAttribute('data-id')).style.display = 'none';
			});
			this.className = 'current';
			document.getElementById(this.getAttribute('data-id')).style.display = 'block';
		}
        
        // 分享
        $("#btn-share").click(function(){
            simapp.tips("转给ta吧！");
        })      
        // 邀请更多朋友支持
        $("#btn-friend").click(function(){
            simapp.tips("转给ta吧！");
        })
        
		// 支持
		$("#btn-support").click(function(){
		    $this = $(this);
		    if(!user.subscribe){
                simapp.toast("先关注才能给好友支持哦");
                if(config.subscribe_url){
                    setTimeout(function(){
                        location.href = config.subscribe_url
                    },1000);
                }
                return ;
            }
		    $.ajax({
		    	type:"POST",
		    	url:"__CONTROLLER__/support",
		    	async:true,
		    	data: {
		    	    tryId: "{$try.id}",
		    	    sid: "{$sid}"
		    	},
		    	beforeSend: function(){
		    	    $this.attr("disabled",true);
		    	    simapp.toast("提交信息……");
		    	},
		    	success: function(res){
		    	    simapp.toast(res.msg);
		    	    if(res.error==0){
		    	        location.reload();
		    	    }
		    	},
		    	error: function(){
		    	    simapp.toast("请稍后再试！");
		    	},
		    	complete: function(){
		    	    $this.removeAttr("disabled");
		    	}
		    });
		})

	})();
</script>